import React,{ Component , Fragment} from 'react';
import GoodsListItem from './GoodsListItem'
import goodsTitle from '../../assets/homeGoods/title-img2.jpg'
import './GoodsLists.css'
import { getOrderList } from '../../api/api'
export default class GoodsList extends Component{
    constructor(props){
        super(props);
        this.state={
            goodsListItem:[]
        }
    }

    componentDidMount(){
        getOrderList().then(res=>{
            this.setState({
                goodsListItem:[...res.data.message]
            })
        })
    }

    getOrderGoods=()=>{
        if(this.state.goodsListItem.length>0){
            return this.state.goodsListItem.map((item,index,key)=>{
                return (
                    <GoodsListItem
                        id={item.goods_id}
                        key={index}
                        pic={item.goods_thumb}
                        title={item.goods_short_title}
                        describe={item.goods_description}
                        discount={item.goods_discount}
                        price={item.goods_now_price}
                        size={item.goods_size}
                    />
                )
            })
        }
    }

    render(){
        return(
            <Fragment>
                <div className = 'goods-lists'>
                    <div className='goods-lists-banner'>
                        <img src={goodsTitle} alt=''/>
                    </div>
                    {this.getOrderGoods()}
                </div>
            </Fragment>
        )
    }
}